<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户统计</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp" %>
    <script src="${staticPath}/commons/echarts/echarts.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="padding:15px;">
        <div id="tool">
            <form id="searchForm" class="form-inline">
                <div class="form-group">
                    <label class="">App类型：</label>
                    <select class="form-control" id="appType">
                        <option value=" ">全部</option>
                        <c:forEach items="${apps}" var="app">
                            <c:choose>
                                <c:when test="${app eq 'Baby'}">
                                    <option value="${app}">时刻小宝</option>
                                </c:when>
                                <c:when test="${app eq 'XiaoWeiShi'}">
                                    <option value="${app}">时刻小卫士</option>
                                </c:when>
                                <c:otherwise>
                                    <option value="${app}">默认应用</option>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </select>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-primary radius" onclick="generatingChart()">
                        生成
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="onlineAccount" style="width: 100%;height:600px;padding-top: 30px"></div>
</div>

<div class="container-fluid">
    <h4 style="text-align: center;padding-bottom: 20px;font-weight: bold;color: #262626" id="onlineTitle">用户详情</h4>
    <table id="online"></table>
</div>
</div>
<script type="text/javascript">
    window.parent.changeTitle('用户统计');
    var myChart;
    var myTableTitle;
    $(function () {
        $('.t-datetimepicker').datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            format: "yyyy-mm-dd",
            minView: 3
        });
        var mainHeight = $(window).height() * 0.8;
//        $('#onlineAccount').height(mainHeight < 350 ? 350 : mainHeight);
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('onlineAccount'));
        getData('${ctx}/admin/report/getAppInfos?type=' + $('#appType').val());
        myChart.on('click', function (param) {
            if (param.seriesIndex == 0) {
                initUserTable('platform', $('#appType').val(), param.name == "PlatformUnknown" ? "Unknown" : param.name);
            } else {
                initUserTable('appVersion', $('#appType').val(), param.name == "VersionUnknown" ? "Unknown" : param.name);
            }
            window.location.href = "#online";
        });
        initUserTable('', "", "");
    });

    function getData(url) {
        $.get(url, function (resp) {
//            var option = {
//                backgroundColor: '#ffffff',
//                color: ['#3398DB'],
//                title: [{
//                    text: resp.body[0].title,
//                    left: '50%',
//                    top: '1%',
//                    textAlign: 'center'
//                }, {
//                    text: resp.body[1].title,
//                    left: '50%',
//                    top: '51%',
//                    textAlign: 'center'
//                }],
//                tooltip: {
//                    trigger: 'axis'
//                },
//                grid: [{
//                    show: false,
//                    left: '10%',
//                    top: '10%',
//                    containLabel: true,
//                    width: '80%',
//                    height: '40%'
//                }, {
//                    show: false,
//                    left: '10%',
//                    top: '60%',
//                    containLabel: true,
//                    width: '80%',
//                    height: '40%'
//                }],
//                xAxis: [{
//                    gridIndex: 0,
//                    type: 'category',
//                    axisTick: {
//                        alignWithLabel: true
//                    },
//                    data: resp.body[0].dates
//                }, {
//                    gridIndex: 1,
//                    type: 'category',
//                    axisTick: {
//                        alignWithLabel: true
//                    },
//                    data: resp.body[1].dates
//
//                }],
//                yAxis: [{
//                    gridIndex: 0,
//                    type: 'value',
//                    nameLocation: 'center',
//                    nameGap: '30',
//                    nameTextStyle: {
//                        fontSize: 16
//                    },
//                    axisLine: {
//                        lineStyle: {
//                            //color: colors[1]
//                        }
//                    },
//                    splitLine: {
//                        show: false
//                    }
//                }, {
//                    gridIndex: 1,
//                    type: 'value',
//                    nameLocation: 'center',
//                    nameGap: '30',
//                    nameTextStyle: {
//                        fontSize: 16
//                    },
//                    axisLine: {
//                        lineStyle: {
//                            //color: colors[0]
//                        }
//                    },
//                    splitLine: {
//                        show: false
//                    },
//                    position: 'left'
//                }],
//                series: [{
//                    name: '用户',
//                    type: 'bar',
//                    xAxisIndex: 0,
//                    yAxisIndex: 0,
//                    label: {
//                        normal: {
//                            show: true,
//                            position: 'top',
//
//                        }
//                    },
//                    data: resp.body[0].counts
//                }, {
//
//                    name: '用户',
//                    type: 'bar',
//                    xAxisIndex: 1,
//                    yAxisIndex: 1,
//                    label: {
//                        normal: {
//                            show: true,
//                            position: 'top',
//                        }
//                    },
//
//                    data: resp.body[1].counts
//                }
//
//                ],
//                itemStyle: {
//                    normal: {
//
//                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                            offset: 0,
//                            color: 'rgba(17, 168,171, 1)'
//                        }, {
//                            offset: 1,
//                            color: 'rgba(17, 168,171, 0.1)'
//                        }]),
//                        shadowColor: 'rgba(0, 0, 0, 0.1)',
//                        shadowBlur: 10
//                    }
//                }
//            };
            var option = {
                title: [{
                    text: resp.body[0].title,
                    left: '22%',
                }, {
                    text: resp.body[1].title,
                    left: '72%',
                }],

                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

//                visualMap: {
//                    show: false,
//                    min: 100,
//                    max: 50000,
//                    inRange: {
//                        colorLightness: [0, 1]
//                    }
//                },
                legend: [{
                    orient: 'horizontal',
                    bottom: '0%',
                    left: '0%',
                    data: resp.body[0].legendData,
                    width: '500',
                }, {
                    orient: 'horizontal',
                    bottom: '0%',
                    left: '55%',
                    width: '500',
                    data: resp.body[1].legendData
                }],
                series: [{
                    name: 'App平台',
                    type: 'pie',
                    radius: '60%',
                    center: ['27%', '50%'],
                    data: resp.body[0].appData,
                    roseType: 'radius',
                    label: {
                        normal: {
                            formatter: "{b} : {c} ({d}%)"
                        }
                    },
//                    itemStyle: {
//                        normal: {
//                            color: '#9fd532',
//                            shadowBlur: 200,
//                            shadowColor: 'rgba(0, 0, 0, 0.5)'
//                        }
//                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }, {
                    name: 'App版本',
                    type: 'pie',
                    radius: '60%',
                    center: ['76%', '50%'],
                    data: resp.body[1].appData,
                    roseType: 'radius',
                    label: {
                        normal: {
                            formatter: "{b} : {c} ({d}%)"
                        }
                    },

//                    itemStyle: {
//                        normal: {
//                            color: '#56b9db',
//                            shadowBlur: 200,
//                            shadowColor: 'rgba(0, 0, 0, 0.5)'
//                        }
//                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }]
            };
            myChart.setOption(option);
        }, 'json');

    }

    function initUserTable(dataType, appType, param) {
        $('#online').bootstrapTable('destroy').bootstrapTable({
            url: '${ctx}/admin/app-user/appUserInfos?dataType=' + dataType + '&appType=' + appType + '&param=' + param,
            idField: 'id',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 15,
            sidePagination: 'server',
            uniqueId: 'id',
            mobileResponsive: true,
            checkbox: true,
            clickToSelect: true,
            queryParams: queryParams,
            responseHandler: responseHandler,
            columns: [
                {
                    title: '#',
                    width: 50,
                    align: 'center',
                    formatter: snFormatter
                },
                {
                    field: 'username',
                    title: '用户名',
                    align: 'center'
                },
                {
                    field: 'realName',
                    title: '真实姓名',
                    align: 'center'
                },
                {
                    field: 'tel',
                    title: '电话',
                    align: 'center'
                },
                {
                    field: 'email',
                    title: '邮箱',
                    align: 'center'
                },
                {
                    field: 'gender',
                    title: '性别',
                    align: 'center',
                    formatter: function (value, row, index) {
                        console.log(row);
                        if (value === 'Male') {
                            return "男";
                        } else if (value === 'Female') {
                            return "女";
                        } else {
                            return "未知";
                        }
                    }
                },
                {
                    field: 'role',
                    title: '角色',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === 'Admin') {
                            return "管理员";
                        } else {
                            return "普通用户";
                        }
                    }
                },
                {
                    field: 'app',
                    title: 'App应用',
                    align: 'center'
                },
                {
                    field: 'appVersion',
                    title: 'App版本',
                    align: 'center'
                },
                {
                    field: 'platform',
                    title: '平台',
                    align: 'center'
                },
                {
                    field: 'terminal',
                    title: '终端',
                    align: 'center'
                }]
        });
    }

    function generatingChart() {
        getData('${ctx}/admin/report/getAppInfos?type=' + $('#appType').val());
        initUserTable("", $('#appType').val(), "");
    }

</script>
</body>
</html>